import styles from './dialog-message-item.module.scss'
import {Avatar} from "antd";
import {Message, MessageRole} from "@/types/chat";
import {Markdown} from "@/app/components/markdown/markdown";
import {RefObject} from "react";

/**
 * 用对象封装属性，方便扩展
 */
interface Props {
    message: Message;
    parentRef?: RefObject<HTMLDivElement>;
}

/**
 * 对话面板消息元素
 * @constructor
 */
export function DialogMessageItem(props: Props) {
    const {message, parentRef} = props;
    const isUser = message.role === MessageRole.user;
    return (
        <>
            <div className={`${styles.messageWrapper} ${!isUser ? styles.receive : styles.send}`}>
                {!isUser ? (
                    <>
                        <Avatar shape="square" src={message.avatar} size={40} style={{
                            borderRadius: '4px',
                            backgroundColor: '#f6f6f6'
                        }}/>
                        <div className={styles.receiveMessage}>
                            <Markdown content={message.content} fontSize={14} defaultShow={false}
                                      parentRef={parentRef}/>
                        </div>

                        {/*<p className={styles.receiveMessage}>{message.content}</p>*/}
                    </>
                ) : (
                    <>
                        <div className={styles.sendMessage}>
                            <Markdown content={message.content} fontSize={14} defaultShow={false}
                                      parentRef={parentRef}/>
                        </div>
                        {/*<p className={styles.sendMessage}>{message.content}</p>*/}
                        <Avatar shape="square" src={message.avatar} size={40} style={{
                            borderRadius: '4px',
                            backgroundColor: '#f6f6f6'
                        }}/>
                    </>
                )}
            </div>
        </>
    );
}
